<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile - DateBox Demos</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
	<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" /> 
	<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" /> 
	<link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" /> 
	
	<!-- NOTE: Script load order is significant! -->
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
	<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
	
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox/demos/extras.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
	<link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
	<script type="text/javascript">
		$('div').live('pagecreate', function() {
			prettyPrint()
		});
	</script>
	
</head>
<body>
<div data-role="page" id="apiEvent"> 
	<div data-role="header" data-position="fixed"> 
		<h1>jQueryMobile - DateBox</h1>
		<a href="../../" data-icon="home" data-iconpos="notext">Home</a>
	</div>
	<div data-role="content">
		<h2>Public Functions</h2>
		
		<p>Datebox has a number of public functions.  They are:</p>
		
		<ul data-role="listview" data-inset="true">
			<li><h3>$('element').datebox('open');</h3><p>Open the DateBox control</p></li>
			<li><h3>$('element').datebox('close');</h3><p>Close the DateBox control</p></li>
			<li><h3>$('element').datebox('disable');</h3><p>Disable the DateBox control</p></li>
			<li><h3>$('element').datebox('enable');</h3><p>Enable the DateBox control</p></li>
			<li><h3>$('element').datebox('refresh');</h3><p>Refresh the DateBox control</p></li>
			<li><h3>$('element').datebox('getTheDate');</h3><p>Retrieve the current date object</p></li>
			<li><h3>$('element').datebox('setTheDate', &lt;date>);</h3><p>Set the current date object</p></li>
			<li><h3>$('element').datebox('getLastDur');</h3><p>Retrieve the last duration object</p></li>
			<li><h3>$('element').datebox({&lt;opt>, &lt;value>});</h3><p>Set "opt" to "value"</p></li>
			<li><h3>$('element').datebox('getOption', &lt;key>});</h3><p>Get value of option named "key" - retrieves standard and i18n options</p></li>
			<li><h3>$('element').datebox('callFormat', &lt;format> &lt;date>)</h3><p>Return a formatted date</p></li>
      <li><h3>$('element').datebox('applyMinMax')</h3><p>Update the controls when min/max attributes have been changed</p></li>
		</ul>
		
		<h2>Events</h2>
		
		<p>Datebox has a few standard init events.  They are:</p>
		
		<ul data-role="listview" data-inset="true">
			<li data-role="list-divider">Standard Callbacks</li>
			<li><h3>Triggered before init of datebox</h3><p><strong>dateboxbeforecreate</strong> Note: this is called on *every* page if datebox is loaded, regardless if there are any datebox elements.</p></li>
			<li><h3>Triggered at init of datebox</h3><p><strong>dateboxcreate</strong> Note: this happens dureing the init, before anything is set, and only on when datebox elements are found</p></li>
			<li><h3>Triggered post-init of datebox</h3><p><strong>dateboxaftercreate</strong></p></li>
		</ul>
		
		<p>Datebox also has a number of custom callback event types.  They all fire the same master event, with an object payload.  To catch:</p>
		
		<pre class="prettyprint">$('element').bind('datebox', function (e, passed) { ... });</pre>

		<p>To override one of the action causeing methods, something like: (must happen before loading JQM and datebox to work)</p>
		<pre class="prettyprint">$('document').bind('pagecreate', function() {
  $('element').bind('datebox', function(e, p) {
    if ( p.method === 'set' ) {
      e.stopImmediatePropagation()
      //DO SOMETHING//
    }
  });
});</pre>


		<ul data-role="listview" data-inset="true">
			<li data-role="list-divider">Event Payloads - Trigger causes action</li>
			<li><h3>Trigger to open datebox</h3><p><strong>{'method'}</strong> === open</p></li>
			<li><h3>Trigger to close datebox</h3><p><strong>{'method'}</strong> === close</p></li>
			<li><h3>Trigger to set specified date</h3><p><strong>{'method'}</strong> === set<br /><strong>{'value'}</strong> === value to place in input<br /><strong>{'date'}</strong> === the date object being used</p></li>
			<li><h3>Trigger to refresh input date</h3><p><strong>{'method'}</strong> === doset</p></li>
			<li><h3>Trigger to clear input field</h3><p><strong>{'method'}</strong> === doclear</p></li>
			<li><h3>Trigger to refresh</h3><p><strong>Note:</strong> Not used interaly.<br /><strong>{'method'}</strong> === dorefresh</p></li>
			<li><h3>Trigger to change date</h3><p><strong>Note:</strong> Not used interaly.<br /><strong>{'method'}</strong> === dooffset<br /><strong>{'amount'}</strong> === Amount of change (usually +/- 1)<br /><strong>{'type'}</strong> === Type of change ( 'y' = Year, 'm' = Month, 'd' = Date, 'h' = Hour, 'i' = Minute, 's' = Second, 'a' = Meridian ) </p></li>
			<li data-role="list-divider">Event Payloads - Action causes trigger</li>
			<li><h3>Triggered on datebox enable</h3><p><strong>{'method'}</strong> === enable</p></li>
			<li><h3>Triggered on datebox disable</h3><p><strong>{'method'}</strong> === disable</p></li>
			<li><h3>Triggered on every data refresh</h3><p><strong>{'method'}</strong> === refresh</p></li>
			<li><h3>Triggered on clear button click</h3><p><strong>{'method'}</strong> === clear</p></li>
			<li><h3>Triggered on date change</h3><p><strong>{'method'}</strong> === offset<br /><strong>{'amount'}</strong> === Amount of change (usually +/- 1)<br /><strong>{'type'}</strong> === Type of change ( 'y' = Year, 'm' = Month, 'd' = Date, 'h' = Hour, 'i' = Minute, 's' = Second, 'a' = Meridian ) </p></li>
		</ul>
		
		<p>Example code to disable datebox on close:</p>
		
				<pre class="prettyprint">$('element').bind('datebox', function (e, passed) { 
  if ( passed.method === 'close' ) {
    $('element').datebox('disable');
  }
});</pre>

		<p>Example to modify and set date without open (increment month by 2):</p>
		<pre class="prettyprint">$('element').trigger('datebox', {'method':'dooffset', 'type':'m', 'amount':2}).trigger('datebox', {'method':'doset'});</pre>
		
		<h2>Working with callbacks</h2>
		<p>Callbacks ('openCallback' and 'closeCallback') are simple to work with - a few interesting features:</p>
		<ul data-role="listview" data-inset="true">
			<li><h3>'this' scope</h3><p>Inside your function, initally, "this" will refer to the widget object</p></li>
			<li><h3>arguments[0]</h3><p>The first argument for the is always the date the control currently is set to.</p></li>
			<li><h3>arguments[1]+</h3><p>The second argument and beyond can be set in 'openCallbackArgs' and 'closeCallbackArgs' respecitvly.</p></li>
		</ul>
		<p>Fun toys inside the widget for your use:</p>
		<ul data-role="listview" data-inset="true">
			<li><h3>lastDuration</h3><p>The last duration set, in seconds</p></li>
			<li><h3>theDate</h3><p>The current set date (object)</p></li>
			<li><h3>d.intHTML</h3><p>The currently generated HTML - this gets clobbered a lot.</p></li>
		</ul>
		
	</div>
	<div data-role="footer" data-position="fixed">
	</div>
</div>
</html>
